<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    {load href="__CSS__bootstrap.min.css"}
    {css href="__INDEX__reset.css"}
    {css href="__CSS__toastr.min.css"}
	<style type="text/css"></style>
</head>
<body>
<!--主体开始-->
    <div class="container">
        <div class="row">
            <div class="col-md-12 bg-primary p20">
                <h1>{$title}</h1>
                <hr>
                <a href="{:url('rest/user/index')}" class="btn btn-default btn-sm">用户列表</a>
                <a href="{:url('rest/user/create')}" class="btn btn-default btn-sm">用户添加</a>
            </div>
        </div>
        <div class="clearfix"></div>

        {block name="main"}

        <div class="row text-center">
            <div class="col-md-12">
                <table class="table table-hover bg-success">
                    <tr>
                        <th class="text-center">ID</th>
                        <th class="text-center">NAME</th>
                        <th class="text-center">AGE</th>
                        <th class="text-center">SEX</th>
                        <th class="text-center">TEL</th>
                        <th class="text-center">PROVINCE</th>
                        <th class="text-center">ACTION</th>
                    </tr>
                    {volist name="list" id="v"}
                    <tr>
                        <td>{$v['id']}</td>
                        <td>{$v['name']}</td>
                        <td>{$v['age']}</td>
                        {if $v['sex']==0}
                        <td>男</td>
                        {elseif $v['sex']==1}
                        <td>女</td>
                        {else}
                        <td>神秘物种</td>
                        {/if}
                        <td>{$v['tel']}</td>
                        <td>{$v['province']}</td>
                        <td class="col-md-4">
                            <button type="button" data-id="{$v['id']}" class="btn btn-default btn-xs show-btn" data-toggle="modal" data-target="#myModal">
                                查看信息(框)
                            </button>
                            <a href="{:url('rest/user/readpage',['id'=>$v['id']])}" class="btn btn-default btn-xs">查看信息(页)</a>

                            <a href="{:url('rest/user/edit',['id'=>$v['id']])}" class="btn btn-primary btn-xs">编辑</a>
                            <button data-id="{$v['id']}" class="btn btn-danger btn-xs del-btn">删除</button>
                        </td>
                    </tr>
                    {/volist}
                </table>
            </div>
        </div>
        {/block}
    </div>
<!--主体结束-->
<!-- Modal -->
{block name="sub"}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">
                    用户 [ <u></u> ] 的详情
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-3">
                        <img src="__INDEX__face/ymwc.jpg" width="100">
                    </div>
                    <div class="col-md-9">
                        <div class="row">
                            <p class="col-md-5"><b>姓名</b></p>
                            <p class="col-md-5 list_name"></p>
                            <p class="col-md-5"><b>年龄</b></p>
                            <p class="col-md-5 list_age"></p>
                            <p class="col-md-5"><b>性别</b></p>
                            <p class="col-md-5 list_sex"></p>
                            <p class="col-md-5"><b>电话</b></p>
                            <p class="col-md-5 list_tel"></p>
                            <p class="col-md-5"><b>地址</b></p>
                            <p class="col-md-5 list_province"></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    {/block}

    {js href="__JS__jquery.min.js"}
    {js href="__JS__bootstrap.min.js"}

    {block name="myjs"}
    {js href="__JS__toastr.min.js"}
    <script>
        $(function(){

            //删除
            $('.del-btn').click(function () {
                // 删除谁
                var delid = $(this).attr('data-id');
                // console.log(delid);
                if (confirm('您确定要 [ 删除 ] 该用户吗')){
                    var obj = $(this).parents('tr');
                    console.log(obj);
                    delAJAX(delid,obj);
                }
            });

            // 设置弹框参数
            toastr.options = {
                closeButton: true,// 是否显示关闭按钮
                progressBar: true,// 实现显示计时条
                timeOut: "3000",  // 自动关闭时间
                // positionClass: "toast-bottom-left" // 提示位置
                // positionClass: "toast-top-full-width" // 提示位置
                positionClass:"toast-top-full-width" //顶端，宽度铺满整个屏幕
                // toast-top-right  顶端右边
            };

            // 查询
            $('.show-btn').click(function(){
            //    查谁
                var uid = $(this).attr('data-id');
                //使用AJAX查询数据
                showAJAX(uid);
            })
        })

        function showAJAX(id){
            // 开始查询
            $.ajax({
                method   : 'get',
                url      : '/users/'+id,
                dataType : 'json',
                success  : function(data){
                    // console.log(data);
                    if (data.status) {
                        $('.modal-title u').html(data.title);
                        // var msg = data.datas.id +'/'+ data.datas.name +'/'+ data.datas.tel;
                        $('.list_name').html(data.datas.name);
                        $('.list_age').html(data.datas.age);
                        if (data.datas.sex == 0){
                            $('.list_sex').html('男');
                        }else if (data.datas.sex == 1) {
                            $('.list_sex').html('女');
                        }else{
                            $('.list_sex').html('神秘物种');
                        }
                        $('.list_province').html(data.datas.province);
                        $('.list_tel').html(data.datas.tel);
                    } else {
                        $('.modal-title u').html(data.title);
                        // $('.modal-body h3').html(data.datas);
                    }
                },
                error    : function () {
                    alert('AJAX 执行失败');
                }
            })
        }

        function delAJAX(id,obj){
            $.ajax({
                method   : 'delete',
                url      : '/users/'+id,
                dataType : 'json',
                success  : function (data){
                    console.log(data);
                    if (data.status){
                        toastr.success(data.info);
                        obj.remove();
                    } else{
                        toastr.error(data.info);
                    }
                },
                error    : function () {
                    alert('AJAX 执行失败');
                }
            })
        }
    </script>
    {/block}
</body>
</html>